<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="css/user.css"/>
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>删除操作</th>
        </tr>
        <tr  id="user">
            <!--<td>100</td>-->
            <!--<td>admin</td>-->
            <!--<td>用户1</td>-->
            <!--<td>22</td>-->
            <!--<td>男</td>-->
            <!--<td>2012-12-12</td>-->
            <!--<td><button>删除</button></td>-->
        </tr>
    </table>

</div>
</body>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url:"userController",
            data:"query",
            dataType:"json",
            success:function (res) {
                //每次进来清空
                $("#user").remove();
                for (var i = 0; i < res.length; i++) {
                   var $li=$("<td>res[i].id</td>\n" +
                        "            <td>res[i].user_name</td>\n" +
                        "            <td>res[i].name</td>\n" +
                        "            <td>res[i].age</td>\n" +
                    if(res[i].sex==1){
                        "<td>男</td>"
                    }else{
                        "<td>女</td>"
                    }
                    +
                        "            <td>res[i].birthday</td>\n" +
                    "            <td><button>删除</button></td>")
                    $("#user").append($li);
                }
            },
            error:function () {
                alert("服务器异常");
            }
        })

    })

</script>
</html>